<template>
  <ContentCard>
    <template #header>
      <pageHeaderNew :title="title"></pageHeaderNew>
    </template>
    <div class="search-box">
      <div>
        <a-space>
          <a-input-search
            :style="{ width: '420px' }"
            placeholder="搜索"
            style="margin-bottom: 8px; max-width: 240px"
          />
        </a-space>
      </div>

      <div>
        <a-space>
          <a-button type="primary" @click="openMenuModal">
            <template #icon>
              <icon-plus />
            </template>
            <template #default>新增菜单</template>
          </a-button>
        </a-space>
      </div>
    </div>
    <TableTurn :tableData="getTableData" :args="args" ref="tableRef">
      <a-table-column :width="60" title="序号" fixed="left">
        <template #cell="{ rowIndex }">
          {{ rowIndex + 1 }}
        </template>
      </a-table-column>
      <a-table-column :width="150" dataIndex="menuName" title="菜单名称">
      </a-table-column>
      <a-table-column :width="150" dataIndex="menuName" title="菜单类型">
        <template #cell="{ record }">{{
          record.menuType === 1
            ? '目录'
            : record.menuType === 2
            ? '路由'
            : record.menuType === 3
            ? 'api'
            : 'api和路由'
        }}</template>
      </a-table-column>
      <a-table-column :width="150" dataIndex="describe" title="最后活跃时间">
        <template #cell="{ record }">{{
          dayjs(record.updatedAt).format('YYYY-MM-DD')
        }}</template>
      </a-table-column>
      <a-table-column :width="150" title="操作">
        <template #cell="{ record }"
          ><a-space>
            <a-tooltip content="删除" position="left">
              <a-popconfirm content="确认删除?" type="error" @ok="del(record)">
                <IconFont
                  type="icon-delete"
                  :size="26"
                  :style="{
                    marginRight: '10px',
                    cursor: 'pointer'
                  }"
                />
              </a-popconfirm>
            </a-tooltip>
            <a-tooltip content="修改菜单">
              <icon-font
                type="icon-edit"
                :size="26"
                :style="{
                  marginRight: '10px',
                  cursor: 'pointer'
                }"
                @click="emit(record)"
              />
            </a-tooltip> </a-space
        ></template>
      </a-table-column>
    </TableTurn>
  </ContentCard>
  <MenuModal
    v-model:visible="modelVisible"
    v-if="modelVisible"
    :editCompanyForm="editCompanyForm"
    @addMenuModel="addMenuModel"
  ></MenuModal>
</template>

<script lang="ts" setup>
import MenuModal from './components/MenuModal.vue';
import {
  getMenuPageList,
  delMenu,
  postMenuList,
  getMenuParameterDuplicationCheck,
  putMenuList
} from '@/apis/authManagement/index';
import { formInjectionKey } from '@arco-design/web-vue/es/form/context';
import dayjs from 'dayjs';

const title = '权限管理';
const modelVisible = ref(false);
const openMenuModal = () => {
  editCompanyForm.value = {};
  modelVisible.value = true;
};
const editCompanyForm = ref<any>({});
const tableRef = ref();
const getTableData = async (page: any) => {
  try {
    const res = await getMenuPageList({ ...page });
    // console.log(res);
    return Promise.resolve(res);
  } catch (err: unknown) {
    console.log(err);
  }
};

const del = async (id: number) => {
  try {
    const ids = [id];
    await delMenu({ ids: ids.join() });
    tableRef.value.loadData();
  } catch (err: unknown) {
    console.log(err);
  }
};

const emit = (record: any) => {
  editCompanyForm.value = record;
  modelVisible.value = true;
};

const addMenuModel = async (record: any, key: string) => {
  if (key === 'add') {
    await getMenuParameterDuplicationCheck({
      parentMenuId: record.parentMenuId,
      menuName: record.menuName
    });
    console.log(record);
    await postMenuList({ ...record });
  } else {
    await putMenuList({ ...record });
  }
  tableRef.value.loadData();
};
</script>

<style lang="less" scoped>
.search-box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 96%;
  margin: 10px;
}
</style>
